<!--
 * @Description:
 * @Author 卞鹏飞 <228443632@qq.com>
 * @create 02/08/24 5:15 PM
 -->
<!--default-->
<script lang="ts">
export default { name: 'SvgIcon', inheritAttrs: true }
</script>
<!--setup-->
<script setup lang="ts">
import { onMounted, getCurrentInstance, computed, type ComponentInternalInstance } from 'vue'
import { isNullable, omit } from 'sf-utils2'
import { setDefaultUnit } from '@shared/utils/common'

const { proxy } = getCurrentInstance() as ComponentInternalInstance

interface IProps {
  /**
   * svg 名称
   */
  svg?: string

  /**
   * 颜色
   */
  color?: string

  /**
   * 图标大小
   */
  size?: string | number

  /**
   * svg 样式
   */
  svgClass?: string | string[] | object[]
}
const props = withDefaults(defineProps<IProps>(), {
  size: '16px',
  color: undefined,
  svg: undefined
})
const emit = defineEmits<{}>()

/* 状态 */

/* 方法 */

/* 计算 */
/**
 * 包裹的样式
 * @type {ComputedRef<{color: string, fontSize: string}>}
 */
const _wrapStyles = computed(() => {
  return omit(
    {
      // @ts-expect-error
      fontSize: setDefaultUnit(props.size),
      color: props.color
    },
    isNullable
  )
})

/* 监听 */

/* 周期 */
onMounted(() => {})

/* 暴露 */
defineExpose({
  $: proxy.$
})
</script>

<!--render-->
<template>
  <i :style="_wrapStyles">
    <svg
      :class="[`svg-icon`, svgClass]"
      aria-hidden="true"
      style="fill: currentcolor; width: 1em; height: 1em"
    >
      <use :xlink:href="`#${props.svg}`" />
    </svg>
  </i>
</template>

<!--style-->
<style scoped lang="less"></style>
